<template>
  <n-layout-sider
    class="go-project-sider"
    bordered
    collapse-mode="width"
    :collapsed="collapsed"
    :native-scrollbar="false"
    :collapsed-width="getAsideCollapsedWidth"
    :width="'15vw'"
    @collapse="collapsed = true"
    @expand="collapsed = false"
  >
    <div class="go-project-sider-flex">
      <aside>
        <n-space vertical class="go-project-sider-top">
          <!-- <project-layout-create :collapsed="collapsed"></project-layout-create> -->
          <n-text style="font-size: 1.5vw; font-weight: bold">{{ title }}</n-text>
        </n-space>
        <n-menu
          :value="menuValue"
          :options="menuOptions"
          :collapsed-width="getAsideCollapsedWidth"
          :collapsed-icon-size="22"
        ></n-menu>
      </aside>
    </div>
  </n-layout-sider>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, toRefs, PropType, h } from 'vue'
import { asideWidth } from '@/settings/designSetting'
import { useSettingStore } from '@/store/modules/settingStore/settingStore'
import { ProjectType } from '@/views/project/list/index.d'
import { PageType } from '@/views/project/items/index.d'

const collapsed = ref<boolean>(false)
const { getAsideCollapsedWidth } = toRefs(useSettingStore())

const props = defineProps({
  menus: {
    type: Array,
    default: () => []
  },
  activeName: String
  // projectInfo: Object as PropType<ProjectType>
})

const title = computed(() => {
  if (props.menus.length) {
    return (props.menus[0] as any).content.name
  }
  return '页面设计平台'
})
const menuValue = computed(() => props.activeName)

const watchWidth = () => {
  const Width = document.body.clientWidth
  if (Width <= 600) {
    collapsed.value = true
  } else collapsed.value = false
}
const emit = defineEmits(['change'])

const menuFormat = (item: any) => {
  return {
    label: () =>
      h(
        'div',
        {
          onClick: () => {
            emit('change', item.content.config, item.name, item.content.name, item.content)
          }
        },
        item.content.name
      ),
    key: item.name
    // icon: renderIcon(TvOutlineIcon),
  }
}

const menuOptions = computed(() => {
  let result = [
    {
      key: 'divider-1',
      type: 'divider'
    }
  ]
  let pages = (props.menus[0] as any).children.sort((a: PageType, b: PageType) => {
    return (a.content!.seq || 0) - (b.content!.seq || 0)
  })
  let list: any[] = []

  let menuObj: any = {}

  const setObj = (data: any, key: string, value: any) => {
    data[key] = value
  }
  pages.forEach((item: any) => {
    if (!item.content.menu_path) {
      // list.push(menuFormat(item))
      menuObj[item.content.name] = item
    } else {
      const pathArr = item.content.menu_path.split('/')
      let lastData = menuObj
      pathArr.forEach((path: string, index: number) => {
        if (!lastData[path]) setObj(lastData, path, {})

        lastData = lastData[path]
        if (index === pathArr.length - 1) {
          setObj(lastData, item.content.name, item)
        }
      })
    }
  })

  const getMenuTree = (menuData: any): any => {
    return Object.keys(menuData).map(key => {
      if (menuData[key].id) {
        return menuFormat(menuData[key])
      } else {
        return {
          label: key,
          key,
          children: getMenuTree(menuData[key])
        }
      }
    })
  }

  list = getMenuTree(menuObj)
  return result.concat(list)
})

onMounted(() => {
  window.addEventListener('resize', watchWidth)
})

onUnmounted(() => {
  window.removeEventListener('resize', watchWidth)
})
</script>

<style lang="scss" scoped>
$siderHeight: 100vh;

@include go(project) {
  &-sider {
    @include fetch-bg-color('aside-background-color');
    &-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;
      margin-top: 30px;
      margin-bottom: 20px;
    }
    &-flex {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: $siderHeight;
    }
  }
  &-layout-sider {
    height: $siderHeight;
  }
  .content-top {
    top: $--header-height;
    margin-top: 1px;
  }
}
</style>
